<template>
  <div class="left-center-his">
    <div class="inner-top">
      <div ref="echartsContainer" style="width: 400px; height: 300px;" v-if="loadFlag1"></div>
      <div class="inner-title">
        A类通过考生占比
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer1" style="width: 400px; height: 300px;" v-if="loadFlag1"></div>
      <div class="inner-title">
        B类及格考生占比
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer2" style="width: 400px; height: 300px;" v-if="loadFlag2"></div>
      <div class="inner-title">
        考生专业占比
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer3" style="width: 400px; height: 300px;" v-if="loadFlag3"></div>
      <div class="inner-title">
        考生年龄占比
      </div>
    </div>
    <div class="inner-top inner-top2">
      <div ref="echartsContainer4" style="width: 460px; height: 300px;"></div>
      <div class="inner-title">
        考题通过率
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { jiashicangQueryF, queryDeptPercent, queryAgePercent, examinationPercent } from '@/api/driver.js'
// const colorList = []
export default {
  data () {
    return {
      config: {
        value: 80,
        localGradient: true
      },
      loadFlag1: false,
      loadFlag2: false,
      loadFlag3: false,
      loadFlag4: false
    }
  },
  mounted () {
    this.getLeftCenter()
    this.getMajorPercent()
    this.getAgePercent()
    this.getExaminationPercent()
  },
  methods: {
    getLeftCenter222 () {
      this.loadFlag1 = false
      jiashicangQueryF().then(res => {
        this.loadFlag1 = true
        setTimeout(() => {
          if (res.data.data.apassPercent !== null) {
            var myChart = echarts.init(this.$refs.echartsContainer)
            myChart.setOption({
              grid: {
                top: '100%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false
              },
              series: [
                {
                  name: 'A类通过考生占比',
                  type: 'pie',
                  radius: ['26%', '40%'],
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  data: [
                    {
                      value: Number(res.data.data.apassPercent).toFixed(2),
                      name: '通过',
                      itemStyle: {
                        borderColor: '#01AAFF60',
                        borderRadius: 10,
                        borderWidth: 2,
                        color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0, color: '#00fdfa'
                            },
                            {
                              offset: 1, color: '#01AAFF'
                            }
                          ],
                          global: false
                        }
                      }
                    },
                    {
                      value: (1 - Number(res.data.data.apassPercent).toFixed(2)).toFixed(2),
                      name: '不通过',
                      itemStyle: {
                        borderColor: '#01AAFF60',
                        borderRadius: 10,
                        borderWidth: 2,
                        color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0, color: '#ff5a92'
                            },
                            {
                              offset: 1, color: '#E91E63'
                            }
                          ],
                          global: false
                        }
                      }
                    }
                  ],
                  // 折现图样式
                  label: {
                    // 文字部分 显示内容为{b}：{c}可以换自己像显示的
                    // 最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
                    // {hr|}为圆点显示内容
                    formatter: '{a|{b}：{c}}\n{hr|}',
                    // 折线图文字颜色
                    color: '#01AAFF',
                    rich: {
                      // 圆点位置大小配置
                      hr: {
                        // auto自定义
                        backgroundColor: 'auto',
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                      },
                      a: {
                        padding: [-12, 10, -20, 15]
                      }
                    }
                  },
                  avoidLabelOverlap: false,
                  itemStyle: {
                    normal: {

                    }
                  },
                  labelLine: {
                    show: false
                  }
                }
              ]
            })
          }

          if (res.data.data.bpassPercent !== null) {
            var myChart1 = echarts.init(this.$refs.echartsContainer1)
            myChart1.setOption({
              grid: {
                top: '100%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false
              },
              series: [
                {
                  name: 'B类及格考生占比',
                  type: 'pie',
                  radius: ['26%', '40%'],
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  data: [
                    {
                      value: Number(res.data.data.bpassPercent).toFixed(2),
                      name: '及格',
                      itemStyle: {
                        borderColor: '#01AAFF60',
                        borderRadius: 10,
                        borderWidth: 2,
                        color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0, color: '#00fdfa'
                            },
                            {
                              offset: 1, color: '#01AAFF'
                            }
                          ],
                          global: false
                        }
                      }
                    },
                    {
                      value: (1 - Number(res.data.data.bpassPercent).toFixed(2)).toFixed(2),
                      name: '不及格',
                      itemStyle: {
                        borderColor: '#01AAFF60',
                        borderRadius: 10,
                        borderWidth: 2,
                        color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0, color: '#ff5a92'
                            },
                            {
                              offset: 1, color: '#E91E63'
                            }
                          ],
                          global: false
                        }
                      }
                    }
                  ],
                  // 折现图样式
                  label: {
                    // 文字部分 显示内容为{b}：{c}可以换自己像显示的
                    // 最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
                    // {hr|}为圆点显示内容
                    formatter: '{a|{b}：{c}}\n{hr|}',
                    // 折线图文字颜色
                    color: '#01AAFF',
                    rich: {
                      // 圆点位置大小配置
                      hr: {
                        // auto自定义
                        backgroundColor: 'auto',
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                      },
                      a: {
                        padding: [-12, 10, -20, 15]
                      }
                    }
                  },
                  avoidLabelOverlap: false,
                  itemStyle: {
                    normal: {

                    }
                  },
                  labelLine: {
                    show: false
                  }
                }
              ]
            })
          }
        }, 100)
      })
    },
    getLeftCenter () {
      this.loadFlag1 = false
      jiashicangQueryF().then(res => {
        this.loadFlag1 = true
        let data = [
          {
            value: Number(res.data.data.apassPercent).toFixed(2),
            name: '通过'
          },
          {
            value: (1 - Number(res.data.data.apassPercent).toFixed(2)).toFixed(2),
            name: '不通过'
          }
        ]
        let data1 = [
          {
            value: Number(res.data.data.bpassPercent).toFixed(2),
            name: '通过'
          },
          {
            value: (1 - Number(res.data.data.bpassPercent).toFixed(2)).toFixed(2),
            name: '不及格'
          }
        ]
        setTimeout(() => {
          if (res.data.data.apassPercent !== null) {
            var myChart = echarts.init(this.$refs.echartsContainer)
            myChart.setOption({
              grid: {
                top: '100%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false
              },
              series: [
                {
                  name: 'A类通过考生占比',
                  type: 'pie',
                  radius: ['26%', '40%'],
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  data: data,
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 20
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      label: {
                        textStyle: {
                          color: '#01AAFF'
                        }
                      }
                    }
                  }
                }
              ]
            })
          }
          if (res.data.data.bpassPercent !== null) {
            var myChart1 = echarts.init(this.$refs.echartsContainer1)
            myChart1.setOption({
              grid: {
                top: '100%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false
              },
              series: [
                {
                  name: 'B类及格考生占比',
                  type: 'pie',
                  radius: ['26%', '40%'],
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  data: data1,
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 20
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      label: {
                        textStyle: {
                          color: '#01AAFF'
                        }
                      }
                    }
                  }
                }
              ]
            })
          }
        })
      })
    },
    getMajorPercent () {
      this.loadFlag2 = false
      queryDeptPercent().then(res => {
        this.loadFlag2 = true
        let data = []
        res.data.data.map(item => {
          data.push({
            value: Number(item.deptNameCountPercent).toFixed(2),
            name: item.deptName || '暂无'
          })
        })
        if (data.length > 0) {
          setTimeout(() => {
            var myChart2 = echarts.init(this.$refs.echartsContainer2)
            myChart2.setOption({
              grid: {
                top: '100%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false
              },
              series: [
                {
                  name: '通过考生占比',
                  type: 'pie',
                  radius: ['26%', '40%'],
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  data: data,
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 20
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      label: {
                        textStyle: {
                          color: '#01AAFF'
                        }
                      }
                    }
                  }
                }
              ]
            })
          }, 100)
        }
      })
    },
    getAgePercent () {
      this.loadFlag3 = false
      queryAgePercent().then(res => {
        this.loadFlag3 = true
        let data = []
        res.data.data.map(item => {
          data.push({
            value: Number(item.agePercent).toFixed(2),
            name: item.age || '暂无'
          })
        })
        setTimeout(() => {
          if (data.length > 0) {
            var myChart3 = echarts.init(this.$refs.echartsContainer3)
            myChart3.setOption({
              grid: {
                top: '100%',
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                show: false
              },
              series: [
                {
                  name: '考生年龄占比',
                  type: 'pie',
                  radius: ['26%', '40%'],
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  data: data,
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 20
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      label: {
                        textStyle: {
                          color: '#01AAFF'
                        }
                      }
                    }
                  }
                }
              ]
            })
          }
        })
      })
    },
    // 考题通过率
    getExaminationPercent () {
      this.loadFlag4 = false
      examinationPercent().then(res => {
        this.loadFlag4 = true
        let aaa = res.data.data.sort((a, b) => Number(a.examinationPassPercent) - Number(b.examinationPassPercent))
        let lableData = []
        let valueData = []
        aaa.map(q => {
          lableData.push(q.examinationName)
          valueData.push(Number(q.examinationPassPercent))
        })
        setTimeout(() => {
          var myChart4 = echarts.init(this.$refs.echartsContainer4)
          myChart4.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: false
            },
            grid: {
              left: '3%',
              right: '4%',
              top: '20%',
              bottom: '5%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#01AAFF',
                  fontSize: 14
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#01AAFF'
                }
              },
              axisTick: {
                show: true,
                length: 4,
                lineStyle: {
                  color: '#01AAFF'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#01AAFF40', '#01AAFF60']
                }
              }
            },
            yAxis: {
              type: 'category',
              data: lableData,
              axisTick: {
                show: true,
                length: 4,
                lineStyle: {
                  color: '#01AAFF'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#01AAFF'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#01AAFF',
                  fontSize: 14
                }
              }
            },
            series: [
              {
                name: '考题通过率',
                type: 'bar',
                orientation: 'horizontal',
                data: valueData,
                barWidth: 20,
                // 设置渐变色
                itemStyle: {
                  borderRadius: [0, 5, 5, 0],
                  color: new echarts.graphic.LinearGradient(
                    0, 1, 1, 0,
                    [
                      { offset: 0, color: '#00EAFF60' },
                      { offset: 0.5, color: '#01AAFF80' },
                      { offset: 1, color: '#01AAFF' }
                    ]
                  )
                }
              }
            ]
          })
        }, 100)
      })
    }
  }
}
</script>

<style lang='scss'>
  .left-center-his{
    height: 750px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    color: rgba(84,197,239,1);
    .inner-top{
      height: 33%;
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
    .inner-top2{
      width: 100%;

    }
    
    .inner-middle{
      height: 33%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
  }
</style>